<%--
  Created by IntelliJ IDEA.
  User: 路♥克
  Date: 2017/12/4
  Time: 21:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="loginLabel">登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/WebSysUser/selectSysUser" method="post">
                    <div class="form-group" >
                        <label for="inputEmail3" class="col-sm-2 control-label">账号</label>
                        <div class="col-sm-10" >
                            <input style="width: 350px" type="text" name="identity" class="form-control" id="inputEmail3" placeholder="username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input  style="width: 350px" type="password" name="token" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-8">
                            <button type="submit" style="width: 100%" class="button  button-highlight button" >立即登录</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <div class="col-sm-offset-6 col-sm-6 text-right">
                        <a href="/web/securitySetting.jsp">忘记密码?</a><a id="registbtn" href="javascript:closelogin()" data-toggle="modal" data-target="#regist">没有账号，立即注册?</a>
                        <script>
                            $(document).on("click","#registbtn",function (){
                                $("#login").modal("hide");
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="regist" tabindex="-1" role="dialog" aria-labelledby="regist">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="RegistLabel">注册</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/WebSysUser/insertSysUser" method="post" onsubmit="return mySubmit()">
                    <input type="hidden" id="phoneCode"/>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-10">
                            <%--<div class="input-group">--%>
                                <input type="text" class="form-control" name="phone" style="width: 50%;float: left" id="phone" onblur="phoneBlur(this)"  placeholder="phone">
                                <label id="phoneMsg" style="font-size: 15px;color: red;padding-top: 5px;margin-left: 10px"></label>
                                <%--<span class="input-group-btn">--%>
                                    <%--<button class="btn btn-default" type="button">获取验证码</button>--%>
                                <%--</span>--%>
                            <%--</div><!-- /input-group -->--%>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="Password" class="col-sm-2 control-label">验证码</label>
                        <div class="col-sm-10">
                            <div class="input-group" style="width:50%;">
                            <input type="password" name="phoneCode"  class="form-control" id="validate" placeholder="validate">
                                <span class="input-group-btn" style="">
                                    <button id="regValidateCodeBtn" class="btn btn-default" type="button" disabled="disabled">获取验证码</button>
                                </span>
                            </div><!-- /input-group -->
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="token" id="password" style="width: 50%;float: left" onblur="passwordBlur(this)" placeholder="Password">
                            <label id="passwordMsg" style="font-size: 15px;color: red;padding-top: 5px;margin-left: 10px"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="REPassword" class="col-sm-2 control-label">确认</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control"  style="width: 50%;float: left" onblur="repasswordBlur(this)" id="REPassword" placeholder="RePassword">
                            <label id="repasswordMsg" style="font-size: 15px;color: red;padding-top: 5px;margin-left: 10px"></label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-8">
                                <button type="submit" style="width: 100%" class="button  button-highlight button" >立即注册</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>


                <div class="form-group" style="margin-top: -30px">
                    <div class="col-sm-offset-6 col-sm-6 text-right" style="margin-top: -10px">
                        <a href="javascript:closeregist(0)"  id="logintbtn" data-toggle="modal" data-target="#login">已有账号，立即登录？</a>
                        <script>
                            $(document).on("click","#logintbtn",function (){
                                $("#regist").modal("hide");
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#regValidateCodeBtn").click(function () {
            var code=/^[1][3,4,5,7,8][0-9]{9}$/;
            var phone = $("#phone").val();
            if(code.test(phone)){
                getValidateCode(phone,$(this));
            }
        });
    });
//    表单验证
    function mySubmit() {
        if(!/^[1][3,4,5,7,8][0-9]{9}$/.test($("#phone").val())){

            console.info("phoneBlur");
            return false;
        }
        if(!/^.{6,20}$/.test($("#password").val())){
            console.info("passwordBlur");
            return false;
        }
        if(!repasswordBlur(obj)){
            console.info("repasswordBlur");
            return false;
        }
        if(flag){
            alert("合格");
        }
        return true;
    }
    //获取验证码
    function getValidateCode(phone,obj) {
        $.ajax({
            url:"/ValidateCode/send",
            data:{"phone":phone},
            dataType:"json",
            type:"GET",
            success:function (flag) {
                btnStockTime( obj);
            },
            error:function (code) {
                alert("未知的错误！");
            }
        });
    }
    function btnStockTime(obj) {
            obj.attr("disabled","disabled");
            var time = 100;
            var timer = setInterval(function () {
                console.info(time);
                time--;
                obj.text("重发"+time);
                if (time==0) {
                    obj.removeAttr("disabled");
                    obj.text("重发");
                    clearInterval(timer);
                }
            },1000);
    }

    //手机文本框失去焦点事件
    function phoneBlur(obj) {
        var value = obj.value;
        var code=/^[1][3,4,5,7,8][0-9]{9}$/;
        var msg;
        var color;
        var icon;
        if(code.test(value)){
            msg="格式合格!";
            color="green";
            icon="ok";
            $.ajax({
                url:"/WebSysUser/selectSysUserIdentity",
                data:{"identity":value},
                dataType:"json",
                success:function (flag) {
                    if (flag){
                        msg="此账户已经存在!";
                        color="red";
                        icon="remove";
                        textMessage("phoneMsg",msg,color,icon);
                    }else{
                        $("#regValidateCodeBtn").removeAttr("disabled");
                    }
                    console.info("1:"+msg);
                },
                error:function () {
                    alert("未知的错误！");
                }
            });
            console.info("2:"+msg);
        }else{
            msg="格式错误!";
            color="red";
            icon="remove";
            $("#regValidateCodeBtn").attr("disabled","disabled");
        }
        console.info("3:"+msg);
        textMessage("phoneMsg",msg,color,icon);

    }
    //密码验证
    function passwordBlur(obj) {
        var value = obj.value;
        var code=/^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/g;
        var msg;
        var color;
        var icon;
        if(code.test(value) && /^.{6,20}$/.test(value)){
            if(value!=''){
                msg="合格";
                color="green";
                icon="ok";
            }else{
                msg="密码不能为空！";
                color="red";
                icon="remove";
            }
        }else{
            msg="密码由6-16个字母和数字组成";
            color="red";
            icon="remove";
        }
        textMessage("passwordMsg",msg,color,icon);
    }
    function repasswordBlur(obj) {
        var value = obj.value;
        var code=$("#password").val();
        var msg;
        var color;
        var icon;
        if(code == value  ){
            if(value !=''){
                msg="合格";
                color="green";
                icon="ok";
            }else{
                msg="密码不能为空！";
                color="red";
                icon="remove";
            }
        }else{
            msg="两次密码要一致！";
            color="red";
            icon="remove";
        }
        textMessage("repasswordMsg",msg,color,icon);
    }
    //文本框验证
    function textMessage(labelId,msg,color,icon) {
        $("#"+labelId+"span").remove();
        var phoneMsg = $("#"+labelId);
        var span = "<span id='"+labelId+"span' class='glyphicon glyphicon-"+icon+"'>"+msg+"</span>";
        phoneMsg.append(span);
        phoneMsg.children("span").css("color",color);
    }
</script>
<div class="wrap footer" >
    <div class="container">
        <div class="row">

            <div class="col-md-3">
                <ul class="list-unstyled text-left">
                    <li><h4>服务支持</h4></li>
                    <li><a href="#" class="text-muted">意见反馈</a></li>
                    <li><a href="#" class="text-muted">广告合作</a></li>
                    <li><a href="#" class="text-muted">网站建站</a></li>
                </ul>
            </div>
            <div class="col-md-3">
                <ul class="list-unstyled text-left">
                    <li><h4>联系方式</h4></li>
                    <li><p>主营：主要经营二类汽车维修（小型车)</p></li>
                    <li><p> 电话:(00) 222 666 444</p></li>
                    <li><p>联系: Facebook, Twitter</p></li>
                </ul>
            </div>
            <div class="col-md-6 pd-20 text-center" >
                <iframe width="404" height="220" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/CAJPN"></iframe>
                <p class="mt-10"><a href="http://j.map.baidu.com/M3aPN" class="text-muted">地址：重庆市垫江县桂溪镇牡丹大道88号</a></p>
            </div>
        </div>
        <hr style="border-top: 1px solid #eaeaea;"/>
        <div class="row">
            <div class="col-md-12 text-center">
                <span class="text-muted">${Application["siteConfig"].siteCopyRight}</span>
            </div>
        </div>
    </div>
</div>
